/**
 * 自定义弹出框
 */

(function(exports) {
    "use strict";

    /**
     * options = { title: "标题", content: "", ok: "", cancel, "", bgColor: "", align: "bottom"
     * opacity: "", id: "givenId" }
     */
    var Popup = function(options) {
        
        var that = this;

        // 定义私有函数, hide all these functions

        /**
         * 阻止背景滚动
         */
        var disableBackgroundScroll = function() {
            $(that.attached).css("overflow", "hidden");
            $("body").css("overflow", "hidden");
        };

        /**
         * 遮罩背景
         */
        var cover = function() {
            var node = $('<div class="popup-cover"></div>');
            
            node.css("width", document.documentElement.clientWidth + "px");
            node.css("height", document.documentElement.clientHeight + "px");
            node.css("top", document.body.scrollTop + "px");
            node.css("opacity", that.opacity);
            node.css("filter", "alpha(opacity:" + that.opacity * 100 + ")");
            
            var root = $(that.attached); // root 为弹出窗口附着的节点，比如 <body>, <content>, <div> ...
            root.append(node); 
        };

        /**
         * 固定在中间
         * class: .popup.center
         */
        var center = function(node) {
            // node.css("top", document.body.scrollTop + document.documentElement.clientHeight * 0.2 + "px");
            //node.css("top", 72 + "px");
            node.css("top", 1.92 + "rem");
            node.addClass("center");
            
            var buttonLineHtml = "";
            if (that.btnNo === 1 ) {
                buttonLineHtml = buttonLineHtml + '<span class="button single">' + that.ok + '</span>';
            } else {
                buttonLineHtml = buttonLineHtml + '<span class="button ok">' + that.ok + '</span>' + '<span class="button cancel">' + that.cancel + '</span>';
            }
            
            // var innerHTML = '<h2 class="title">' 
            //     + that.title 
            //     + '</h2><p class="content">' 
            //     + that.content
            //     + '</p><p class="bottom">'
            //     + buttonLineHtml 
            //     + '</p>';

            var innerHTML = '<h2 class="title">' 
                + that.title 
                + '</h2><div class="content">' 
                + that.content
                + '</div><p class="bottom">'
                + buttonLineHtml 
                + '</p>';
            node.html(innerHTML);
            
            return node;
        };

        /**
         * 固定在底部
         * class: .popup.bottom
         */
        var bottom = function(node) {
            node.css("width", document.documentElement.clientWidth - 3 + "px");
            node.addClass("bottom");

            var buttonLineHtml = "";
            if (that.btnNo === 1) {
                buttonLineHtml = '<div class="foot"><span class="single">' + that.ok + '</span></div>';
            } else if (that.btnNo === 2) {
                buttonLineHtml = '<div class="foot"><span class="left">' + that.ok + '</span><span class="right">' + that.cancel + '</span></div>';
            }
            
            var innerHTML = '<p class="title"><span>' 
                + that.title 
                + '</span></p><div class="content">' 
                + that.content 
                + '</div><span class="esc"><i class="left"></i><i class="right"></i></span>'
                + buttonLineHtml;
            node.html(innerHTML);
            
            return node;
        };

        /**
         * 绑定默认的事件，如果要自定义事件，请自行绑定，如：$(".button.ok").on("click", function(){ ... });
         * only for center
         */
        var binds = function() {
            // 针对中间的窗口
            $('.popup .bottom .button').unbind().on("click", function(event){
                that.close();
                event.preventDefault();
            });
            
            // 针对底部的框
            $('.popup.bottom .esc').unbind().on("click", function(event){
                that.close();
                event.preventDefault();
            });
        };

        var show = function() {
            var node = $('<div class="popup" id="' + that.id + '"></div>');
            node.css("background-color", that.bgColor);
            
            if (options.align === "bottom") {
                node = bottom(node);
            } else {
                // center as default
                node = center(node);
            }
            
            var root = $(that.attached); // root 为弹出窗口附着的节点，比如 <body>, <content>, <div> ...
            root.append(node); 
            
            binds(); // 必须放在最后，因为html才刚刚append上去
        };
        
        // 构造函数开始
        if (options) {
            this.id = options.id ? options.id : "alert"; // id也可自定义
            this.title = options.title ? options.title : "";
            this.content = options.content ? options.content : "";
            this.ok = options.ok ? options.ok : "确定";
            this.cancel = options.cancel ? options.cancel : "取消";
            this.btnNo = options.btnNo ? options.btnNo || 2 : 0;
            this.bgColor = options.bgColor ? options.bgColor : "#d4d4d4";
            this.opacity = options.opacity ? options.opacity : "0.7";
            
            this.align = options.align ? options.align : "center";
            this.attached = options.attached ? options.attached : "body";  // 可自定义依附于什么元素上
            
            cover(); // 覆盖一个背景
            show(); // 显示弹出框
            disableBackgroundScroll(); // 阻止背景滚动
        }
    };

    /**
     * 退出
     */
    Popup.prototype = {

        close : function() {
            $(".popup, .popup-cover").remove();
            
            document.body.removeEventListener('touchmove',function (event) {
                event.preventDefault();
            }, false);
        }
    };

    exports.Popup = Popup;

    /**
     * 兼容AMD和非AMD规范
     */
    if (typeof define === "function" && define.amd) {
        define(["jquery"], function($) {
            return Popup;
        });
    }
})(window);